<template>
  <div class="dialog-container">
    <el-dialog :visible.sync="showAdd" width="50%" :title="titles[btnType]" :before-close="handleClose">

      <el-form :model="form" label-width="120px">
        <el-form-item>
          <span slot="label">
            <must/><span>关键字</span>
          </span>
          <el-input v-model="form.dictId" readonly/>
        </el-form-item>
        <el-form-item>
          <span slot="label">
            <must/><span>编码</span>
          </span>
          <el-input :readonly="readOnly" v-model="form.code" type="number" v-validate="'required|max:99999'" name="编码" placeholder="请输入编码" />
          <span v-show="errors.has('编码')" style="color: red;">{{ errors.first('编码') }}</span>
        </el-form-item>
        <el-form-item>
          <span slot="label">
            <must/><span>名称</span>
          </span>
          <el-input v-model="form.name" v-validate="'required|max:50'" name="名称" type="textarea" :rows="2" placeholder="请输入名称"></el-input>
          <span v-show="errors.has('名称')" style="color: red;">{{ errors.first('名称') }}</span>
        </el-form-item>
        <el-form-item>
          <span slot="label">
            <span>备注说明</span>
          </span>
          <el-input v-model="form.memo" v-validate="'max:100'" name="备注说明" type="textarea" :rows="2" placeholder="请输入备注说明"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleClose" type="danger">关 闭</el-button>
        <el-button @click="handleSave" type="primary" :disabled="btnDisabled">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /* 工具 */
  import * as common from '@/utils/base/common'
  import * as myForm from '@/utils/base/myForm'

  export default {
    /* 数据字典从表 - 添加 修改页面  */
    name: 'code-add',
    data() {
      return {
        restPath: 'sys/dictInfo',
        btnDisabled: false, //按钮禁用状态
        readOnly: false, // 是否只读
        titles: {
          create: '添加',
          update: '修改',
        },
        create: 'create',
        update: 'update',
        form: {
          dictId: '',
          code: '',
          name: '',
          nt: '',
        },
      }
    },
    props: ['showAdd', 'btnType', 'formData'],
    created() {
      this.initData()
    },
    methods: {
      initData() {
        // 修改页面
        if(this.btnType == this.update) {
          this.initData2Update()
        } else {
          this.form.dictId = this.formData.dictId
        }

      },

      initData2Update() {
        this.readOnly = true
        this.form = this.formData
      },

      /**
       * 点击保存按钮
       */
      handleSave() {
        this.$validator.validateAll().then((result) => {
          if(result) {
            // 修改页面
            if(this.btnType === this.update) {
              myForm.updateSave(this, this.restPath, this.form)
            }
            // 添加页面
            else {
              this.addSave()
            }
          } else {
            // 提示信息，并且防止连续多次请求
            common.tips(this, '有验证信息没有通过，请查看页面信息是否填写完整或正确！')
          }
        })
      },

      addSave(){
        myForm.addSave(this, this.restPath, this.form)
      },

      handleClose() {
        this.$emit('closeDialog') // 向父组件发送关闭事件
      },

    } // methods end
  }
</script>

<style scoped>
  @import "~@/styles/form.css";
</style>
